<template>
  <div class="eg-slideshow"
       style="width:100%;height:100%"
       v-bind:style="{ 'background': getBackground }">
    <eagle-slide v-for="(layoutItem, i) in sortLayout"
     :enter="layoutItem.slideAnimation.enter"  :leave="layoutItem.slideAnimation.enter.leave"
     :layoutItem="layoutItem"
     :steps="layoutItem.slideAnimation.steps"
     :mouseNavigation="false"
     :backBySlide="true"
     :key="i">
    </eagle-slide>
    </div>
</template>

<script>
import { Slideshow } from 'eagle.js'
import EagleSlide from '@/components/EagleSlide.vue'

export default {
  mixins: [Slideshow],
  components: {
    EagleSlide
  },
  computed: {
    sortLayout () {
      return JSON.parse(JSON.stringify(this.$store.getters.sortLayout))
    },
    getBackground () {
      return this.$store.getters.getBackground
    }
  }
}
</script>
